<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-03 17:33:17
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-21 17:39:46
 * @FilePath: \hy-ui\src\views\taskMassage\components\project\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-13 14:44:57
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-04 10:36:56
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="project" v-if="isTask">
      <el-container>
        <el-aside width="220px">
          <div class="asideTop">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleCreate('1')"
              >创建项目</el-button
            >
            <el-input
              size="medium"
              placeholder="搜索项目"
              prefix-icon="el-icon-search"
              v-model="searchValue"
              style="width: 100%"
              @input="handleInput"
            >
            </el-input>
          </div>
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="1" @click="() => handleQuery({ type: '6' })">
              <i class="el-icon-star-on" style="color: rgb(247, 186, 42)"></i>
              <span slot="title" class="subitemTitle"
                ><span>我关注的项目</span>
                <!-- <span class="soltNum">11</span> -->
              </span>
            </el-menu-item>
            <el-menu-item index="2" @click="() => handleQuery({ type: '1' })">
              <i class="el-icon-menu" style="color: #409eff"></i>
              <span slot="title" class="subitemTitle"
                ><span>所有执行项目</span>
                <!-- <span class="soltNum">99</span> -->
              </span>
            </el-menu-item>
            <el-menu-item index="3" @click="() => handleQuery({ type: '2' })">
              <i class="el-icon-share"></i>
              <span slot="title" class="subitemTitle"
                ><span>我管理的项目</span>
                <!-- <span class="soltNum">99</span> -->
              </span>
            </el-menu-item>
            <el-menu-item index="4" @click="() => handleQuery({ type: '3' })">
              <i class="el-icon-share"></i>
              <span slot="title" class="subitemTitle"
                ><span>我创建的项目</span>
                <!-- <span class="soltNum">99</span> -->
              </span>
            </el-menu-item>
            <el-menu-item index="5" @click="() => handleQuery({ type: '4' })">
              <i class="el-icon-share"></i>
              <span slot="title" class="subitemTitle"
                ><span>我参与的项目</span>
                <!-- <span class="soltNum">99</span> -->
              </span>
            </el-menu-item>
            <el-menu-item index="6" @click="() => handleQuery({ type: '5' })">
              <i class="el-icon-share"></i>
              <span slot="title" class="subitemTitle"
                ><span>已完结的项目</span>
                <!-- <span class="soltNum">99</span> -->
              </span>
            </el-menu-item>
          </el-menu></el-aside
        >
        <el-main v-loading="loading">
          <div class="mainCnt" :style="{ width: isScreen ? '80%' : '100%' }">
            <div class="topNav">
              <div class="topNav_left">
                <i class="el-icon-s-home"></i>
                <span>项目首页</span>
              </div>
              <div class="topNav_right">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="时间排序"
                  placement="top"
                >
                  <screenTime ref="screenTimeRef" :getTimeData="getTimeData" />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="项目筛选"
                  placement="top"
                >
                  <i
                    :class="['el-icon-coin']"
                    :style="{
                      color:
                        formScreen.people.length || formScreen.admin.length
                          ? '#1890ff'
                          : '#888',
                      marginLeft: '20px',
                      cursor: 'pointer',
                    }"
                    @click="openIsScreen"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="切换显示模式"
                  placement="top"
                >
                  <i
                    class="el-icon-menu"
                    style="
                      color: #888;
                      margin-left: 20px;
                      margin-top: -2px;
                      cursor: pointer;
                    "
                    @click="handleViewSwitch"
                  ></i>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="显示列"
                  placement="top"
                  v-if="isTable"
                >
                  <viewRow :handleAttribute="handleAttribute" />
                </el-tooltip>
              </div>
            </div>
            <div>
              <tableMode
                v-if="isTable"
                :list="list"
                :handleOperate="handleOperate"
                :pro_table_col="pro_table_col"
                :goproTask="goproTask"
                :getList="getList"
              />
              <cardMode
                v-else
                :list="list"
                :handleOperate="handleOperate"
                :isScreen="isScreen"
                :goproTask="goproTask"
                :getList="getList"
              />
              <el-empty
                description="暂无项目"
                v-if="!isTable && !list.length"
              ></el-empty>
            </div>
          </div>
          <div class="projectScreening" v-if="isScreen">
            <projectScreeningCom
              :close="isScreenClose"
              v-if="isScreen"
              :form="formScreen"
            />
          </div>
        </el-main>
      </el-container>
    </div>
    <div class="project_task" v-else>
      <div class="project_task_header">
        <span style="cursor: pointer">
          <i class="el-icon-arrow-left" @click="setIsTask"></i>
          <span style="margin-top: -3px">
            <el-dropdown trigger="click">
              <span
                class="el-dropdown-link"
                style="font-size: 15px; color: #333; font-weight: bold"
              >
                {{ choosePro.title
                }}<i
                  class="el-icon-arrow-down el-icon--right"
                  style="font-size: 18px"
                ></i>
              </span>
              <el-dropdown-menu
                slot="dropdown"
                style="
                  width: 200px;
                  padding: 12px;
                  max-height: 200px;
                  overflow-y: scroll;
                "
              >
                <el-input
                  v-model="searchValue"
                  @input="handleInput"
                  placeholder="搜索项目"
                  style="margin-bottom: 12px"
                ></el-input>
                <el-dropdown-item
                  style="padding: 0"
                  v-for="item in list"
                  :key="item.id"
                  :command="item.id"
                >
                  <div style="padding: 0 17px" @click="goproTask(item)">
                    <span
                      :style="{
                        color:
                          item.id === choosePro.id
                            ? 'rgb(24, 144, 255)'
                            : '#666',
                        fontWeight: item.id === choosePro.id ? 'bold' : '500',
                      }"
                      >{{ item.title }}</span
                    >
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></span
          >
        </span>
      </div>
      <div class="pro_task_tabs">
        <el-tabs v-model="activeNameTask">
          <el-tab-pane label="看板" name="1">
            <bulletinBoardTask
              :activeName="activeNameTask"  v-if="activeNameTask === '1'"
              :row="choosePro"
              ref="bulletinBoardTaskRefCard"
            />
          </el-tab-pane>
          <el-tab-pane label="表格" name="2"
            ><bulletinBoardTask v-if="activeNameTask === '2'"
              :activeName="activeNameTask"
              :row="choosePro"
              ref="bulletinBoardTaskRefTable"
          /></el-tab-pane>
          <el-tab-pane label="甘特图" name="5">
            <bulletinBoardTask
              :activeName="activeNameTask"  v-if="activeNameTask === '5'"
              :row="choosePro"
              ref="bulletinBoardTaskRefGantt"
          />
            </el-tab-pane>
          <el-tab-pane label="文件" name="3"
            ><file
              :row="choosePro"
              v-if="activeNameTask === '3'"
              ref="fileGetList"
          /></el-tab-pane>
          <el-tab-pane label="统计" name="4"
            ><Statistics v-if="activeNameTask === '4'" :isProject="true"
          /></el-tab-pane>
        </el-tabs>
        <div class="pro_task_config" @click="handleOperate('3', choosePro)">
          <i
            class="el-icon-s-tools"
            style="font-size: 20px; color: #777; cursor: pointer"
          ></i>
        </div>
      </div>
    </div>
    <create
      :open="open"
      :close="close"
      :title="title"
      v-if="open"
      :getList="getList"
      :detailId="detailId"
      :isDetail="isDetail"
    />
  </div>
</template>

<script >
import screenTime from "@/views/taskMassage/components/project/components/screenTime.vue";
import viewRow from "@/views/taskMassage/components/project/components/viewRow.vue";
import tableMode from "@/views/taskMassage/components/project/components/tableMode.vue";
import cardMode from "@/views/taskMassage/components/project/components/cardMode.vue";
import projectScreeningCom from "@/views/taskMassage/components/project/components/projectScreeningCom.vue";
import create from "@/views/taskMassage/components/project/components/create.vue";
import { list, deleteProject, finish } from "@/api/task/project.js";
import bulletinBoardTask from "@/views/taskMassage/components/project/components/bulletinBoardTask.vue";
import file from "@/views/taskMassage/components/project/components/file.vue";
import Statistics from "@/views/taskMassage/components/statistics";


export default {
  components: {
    screenTime,
    viewRow,
    tableMode,
    cardMode,
    projectScreeningCom,
    create,
    bulletinBoardTask,
    file,
    Statistics,
  },
  data() {
    return {
      viewFormat:'day',
      activeNameTask: "1",
      queryParmas: {
        type: "1",
        timeType: "1",
      },
      isTask: true,
      searchValue: undefined,
      isTable: true,
      isScreen: false,
      open: false,
      loading: false,
      formScreen: {
        people: [],
        admin: [],
      },
      list: [],
      copyList: [],
      detailId: undefined,
      isDetail: false,
      choosePro: {},
      pro_table_col: {
        createByName: false,
        admin: true,
        status: true,
        createTime: false,
        startTime: true,
        endTime: true,
        progress: true,
      },
    };
  },
  mounted() {
    this.getList();
    if (localStorage.getItem("pro_table_col")) {
      this.pro_table_col = JSON.parse(localStorage.getItem("pro_table_col"));
    } else {
      localStorage.setItem("pro_table_col", JSON.stringify(this.pro_table_col));
      this.pro_table_col = JSON.parse(localStorage.getItem("pro_table_col"));
    }
  },
  watch: {
    changeProps: {
      handler(val) {
        if (val.people?.length) {
          this.queryParmas = {
            ...this.queryParmas,
            userIds: val.people.toString(),
          };
        }
        if (val.admin?.length) {
          this.queryParmas = {
            ...this.queryParmas,
            adminIds: val.admin.toString(),
          };
        }
        this.getList();
      },
      deep: true,
    },
  },
  computed: {
    changeProps() {
      const { people, admin } = this.formScreen;
      return {
        people,
        admin,
      };
    },
  },
  methods: {
    getTimeData(val) {
      this.queryParmas = { ...this.queryParmas, timeType: val };
      this.getList();
    },
    goproTask(row) {
      this.isTask = false;
      this.choosePro = row;
      this.searchValue = undefined;
      this.list = this.copyList;
      this.$nextTick(() => {
        if (this.activeNameTask === "1") {
          this.$refs.bulletinBoardTaskRefCard.reset();
        }
        if (this.activeNameTask === "2") {
          this.$refs.bulletinBoardTaskRefTable.reset();
        }
         if (this.activeNameTask === "5") {
          this.$refs.bulletinBoardTaskRefGantt.reset();
        }
        if (this.activeNameTask === "3") {
          this.$refs.fileGetList.reset();
        }
      });
    },
    setIsTask() {
      this.isTask = true;
      this.searchValue = undefined;
      this.list = this.copyList;
      this.choosePro = {};
    },
    handleAttribute(val) {
      localStorage.setItem("pro_table_col", JSON.stringify(val));
      this.pro_table_col = val;
    },
    handleInput(val) {
      if (val) {
        this.list = this.copyList.filter((item) => item.title.includes(val));
      } else {
        this.list = this.copyList;
      }
    },
    // 创建项目
    handleCreate(type, id) {
      this.isDetail = false;
      const typeEnum = {
        1: "创建项目",
        2: "编辑项目",
        3: "项目详情",
      };
      this.title = typeEnum[type];
      this.open = true;
      if (id) {
        this.detailId = id;
      }
      if (type === "3") {
        this.isDetail = true;
      }
    },
    // 关闭抽屉
    close(val) {
      if (val === "1" || this.isDetail) {
        this.open = false;
        return;
      }
      this.$confirm("数据还未保存，确认关闭吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.open = false;
        })
        .catch(() => {});
    },
    async getList() {
      this.loading = true;
      const res = await list({ ...this.queryParmas });
      this.list = res.rows;
      this.copyList = res.rows?.length
        ? JSON.parse(JSON.stringify(res.rows))
        : [];
      this.loading = false;
      // screenTimeRef
    },
    deletePro(id) {
      this.$confirm("确认删除该项目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteProject(id);
          if (res.code === 200) {
            this.$message.success("删除成功！");
            this.getList();
          }
        })
        .catch(() => {});
    },
    finishPro(id) {
      this.$confirm("确认完结该项目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await finish(id);
          if (res.code === 200) {
            this.$message.success("完成成功！");
            this.getList();
          }
        })
        .catch(() => {});
    },
    handleQuery(value) {
      this.queryParmas = { ...this.queryParmas, ...value };
      this.getList();
    },
    handleViewSwitch() {
      this.isTable = !this.isTable;
    },
    handleOperate(type, row) {
      if (type === "2" || type === "3") {
        this.handleCreate(type, row.id);
      }
      if (type === "4") {
        this.deletePro(row.id);
      }
      if (type === "5") {
        this.finishPro(row.id);
      }
    },
    isScreenClose() {
      this.isScreen = false;
    },
    openIsScreen() {
      this.isScreen = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.project_task {
  .project_task_header {
    padding: 12px 0 12px 12px;
    display: flex;
    align-items: center;
    ::v-deep .el-icon-arrow-left {
      color: #333;
      font-size: 20px;
      margin-right: 8px;
      cursor: pointer;
    }
  }
  .pro_task_tabs {
    position: relative;
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .pro_task_config {
      position: absolute;
      z-index: 9;
      right: 10px;
      top: 12px;
    }
    ::v-deep .is-active {
      color: #000;
      font-weight: bold;
    }
    ::v-deep .el-tabs__item {
      width: 100px;
      text-align: center;
      padding: 0 20px;
    }
    ::v-deep .el-tabs__header {
      // padding-left: 30px;
    }
  }
}
.project {
  aside {
    padding: 0;
    background: #fff;
    .asideTop {
      display: flex;
      flex-direction: column;
      padding: 20px 20px;
      ::v-deep .el-input__inner {
        border-radius: 18px;
        margin-top: 12px;
      }
      ::v-deep .el-input__prefix {
        height: 36px;
        margin-top: 12px;
      }
    }
  }

  main {
    background: #f0f2f5;
    padding: 10px;
    display: flex;
    .projectScreening {
      width: 20%;
      background: #fff;
      margin-left: 10px;
    }
    .mainCnt {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      .topNav {
        padding: 16px 40px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .topNav_left {
          color: #888;
          span {
            font-size: 13px;
            margin-left: 3px;
          }
        }
        .topNav_right {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  ::v-deep .el-menu {
    min-height: 68vh;
  }
}
</style>